<template>
	<view class="register-lay">
		<uni-nav-bar :fixed="true" :border="false"  status-bar left-icon="left" @clickLeft="back" >
		</uni-nav-bar>
		<view class="Welcome">
			你好，欢迎使用钉校园
		</view>
		<view class="prompt">
			请完善个人信息
		</view>
		<view class="form">
			<view class="form-name">
				<view class="prefix">
					姓名
				</view>
				<u-input  
				v-model="user.userName"
				type="text" 
				placeholder="请输入姓名"
				@input="isdisabled(user.userName,user.phone,user.password)"/>
			</view>
			<view class="form-phone">
				<view class="prefix">
					+86
				</view>
				<u-input  
				v-model="user.phone"
				type="number" 
				placeholder="请输入手机号"
				@input="isdisabled(user.userName,user.phone,user.password)"/>
			</view>
			<view class="form-password">
				<view class="prefix">
					密码
				</view>
				<u-input
				class="uni-input" 
				v-model="user.password"  
				placeholder="请输入密码" 
				:password="openPassword"
				@input="isdisabled(user.userName,user.phone,user.password)"/>
				<view :class="[!openPassword ? 'psd-eye-active' : 'psd-eye']" @click="changePassword"></view>
			</view>
			<view class="prompt">
				至少8个字符，不能全是字母或数字
			</view>
			<view class="agreement">
				<u-checkbox-group @change="checkboxChange()">
					<u-checkbox v-model="checked" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="agree">
					我已经阅读并同意
				</view>
				<u-link href="https://uviewui.com/" text="服务协议," fontSize="13"></u-link>
				<u-link href="https://uviewui.co m/" text="隐私权政策" fontSize="13"></u-link>
			</view>
			
			<view class="register-next">
				<u-button :disabled="isNext" text="注册" @click="register()"></u-button>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				nextToast:{
					type: 'default',
					title: '默认主题',
					message: "",
				},
				successToast:{
					type:'default',
					title:'默认主题',
					message:'注册成功',
					url:'/pages/login/login',
				},
				user:{
					userName:'',
					phone:'',
					password:'',
				},
				openPassword:true,
				checked:false,
				isNext:true,
			}
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changePassword() {
			     this.openPassword = !this.openPassword;
			},
			isdisabled(name,phone,password){
				if(password.length<8||name.length==0||phone.lengt==0){
					this.isNext = true;
				}else{
					this.isNext = false;
				}
			},
			checkboxChange(){
				this.checked = !this.checked;
				// console.log(this.checked);
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete(){
						params.url&&uni.navigateTo({
							url:params.url
						})
					}
				})
			},
			register(){
				let _this = this
				if(_this.checked == false){
					this.nextToast.message = "请阅读并勾选协议再进行注册"
					_this.showToast(_this.nextToast);
				}else if(_this.user.phone.length<11){
					this.nextToast.message = "请输入正确的手机号码",
					_this.showToast(_this.nextToast);
				}else{
					uni.request({
						url:"http://localhost:8090/nailCampus/index/register",
						method:'POST',
						data:_this.user,
						success(res){
							console.log(res.data);
							if(res.data.code==200){
								_this.showToast(_this.successToast);
							}else{
								_this.nextToast.message = res.data.data;
								_this.showToast(_this.nextToast);
							}
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.register-next{
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 180rpx;
		.u-button{
			border-radius: 12rpx;
			color: white;
			background-color: #0080FF;
		}
	}
	.agreement{
		font-size: 27rpx;
		margin-top: 100rpx;
		.u-checkbox-group{
			float: left;
		}
		.u-link{
			float: left;
		}
		.agree{
			float: left;
		}
	}
	.form{
		.form-name{
			margin-top: 100rpx;
			border-bottom:1px solid #bdbfc1 ;
			.prefix{
				line-height: 70rpx;
				font-weight:bold;
				float: left;
				
			}
			.u-input{
				margin-left: 150rpx;
				border: none;
			}
		}
		.form-phone{
			margin-top: 60rpx;
			border-bottom:1px solid #bdbfc1 ;
			.prefix{
				line-height: 70rpx;
				font-weight:bold;
				float: left;
				
			}
			.u-input{
				margin-left: 150rpx;
				border: none;
			}
		}
		.form-password{
				margin-top: 60rpx;
				border-bottom:1px solid #bdbfc1 ;
				.prefix{
					line-height: 70rpx;
					font-weight:bold;
					float: left;
					
				}
				.u-input{
					margin-left: 150rpx;
					border: none;
				}
				.psd-eye-active{
						margin-top: -60rpx;
				        width: 60rpx;
				        height: 45rpx;
				        background:url(@/static/login/eye-open.png) no-repeat center center;
				        position: absolute;
				        right: 50rpx;
				        z-index:10;
				    }
				.psd-eye{
						margin-top: -60rpx;
				        width: 60rpx;
				        height: 45rpx;
				        background:url(@/static/login/eye-close.png) no-repeat center center;
				        position: absolute;
				        right: 50rpx;
				        z-index:10;
				    }
		}
	}
	.register-lay{
		margin-left: 50rpx;
		margin-right: 50rpx;
	}
	.Welcome{
		margin-top: 30rpx;
		font-size: 40rpx;
		font-weight:bold;
	}
	.prompt{
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #969698;
	}
</style>